﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!-- saved from url=(0029)http://www.helpandmanual.com/ -->
<head> 
   <title>New container/General tab</title> 
   <!-- Template design (c) copyright 2008-2009 by Tim Green and EC Software -->
   <meta name="generator" content="Help &amp; Manual" /> 
   <meta name="keywords" content="" />
   <meta name="description" content="New container/General tab" />
   <meta name="copyright" content="© 2012 Kentico Software" /> 
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
   <link type="text/css" href="default.css" rel="stylesheet" /> 
   <link type="text/css" href="custom.css" rel="stylesheet" />

   <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="jquery.scrollTo-min.js"></script>
   <script type="text/javascript" src="nsh.js"></script>



         
   <!-- CSS set with project variables and local attributes --> 
   <style type="text/css" media="screen"> 
   body { background: #fff; } 
   #breadcrumbs {width: 100%; background-color: white; border-bottom: 1px solid #000; padding: 0px 0px 5px 15px;
   margin: 3px 0; font-size: 8pt; color: #000;}
   #breadcrumbs a { color: #000; text-decoration: none;}
   #breadcrumbs a:visited { color: #000; }
   #breadcrumbs a:hover { color: #098ae2; text-decoration: none; }
   .help-url { font-size: 10pt; font-family: Arial, Verdana, Helvetica, sans-serif; 
               color: #1f84e8; text-align: center; margin: 5px 20px 10px 0px; 
               padding-top: 14px; border-top: 1px solid #000;}
   .help-url a { color: #098ae2; text-decoration: none; }
   .help-url a:visited { color: #098ae2; }
   .help-url a:hover { color: #098ae2; text-decoration: underline; }
   .highlight {background: #ffff40;}
   .breadhead {padding: 5px 0px 0px 0px !important;}    
   #innerdiv   
   {   
   padding-left: 5px;
   }
   

   </style> 

<!-- Adjustment for IE -->
<!--[if lte IE 8]>
<style type="text/css">
.topichead { padding-right: 0; }
   
   
   	.breadhead {
	margin: 0;
	padding-right: 5px;
	}
   
   
</style>
<![endif]-->
   
<script type="text/javascript">
// Initialize the page 
addEvent(window, "load", nsrInit);
addEvent(window, "load", doResize);
addEvent(window, "resize", doResize);
addEvent(window, "load", toggleJump);

</script>


<script type="text/javascript">
function mailFB_custom() {
var headerText = unQuot("Feedback on: Kentico CMS 6.0 Context Help - New container/General tab".replace('&nbsp;',''));
var fb1 = "mailto:" + escape('Kentico Support Team <support@kentico.com>') + "?subject=" + headerText;
var titlePath = unQuot("CMS Site Manager &gt; Development &gt; Web part containers &gt; Edit container &gt; New container/General tab /");
var fb2 = "&body=Ref:%20" + titlePath + "%20ID:%20NewEdit_container%0A%0D%0A%0D" + unQuot("Dear Support Staff,") + "%0A%0D%0A%0D";
var fb = fb1 + fb2;
document.location.href=fb;
}
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-105987-4']);
  _gaq.push(['_setDomainName', '.kentico.com']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>        
<script type="text/javascript" src="helpman_topicinit.js"></script>
<!-- Redirect browser to frame page if page is not in the content frame. -->
<script type="text/javascript">
<!--
if (location.search.lastIndexOf("toc=0")<=0) {
  if (parent.frames.length==0) { parent.location.href="index.html?newedit_container.htm"; }
  else { parent.quicksync('a2.4.20.3.1'); }
}
//-->
</script>
<script type="text/javascript" src="highlight.js"></script></head> 
<body onload="highlight();">
<div id="hmpopupDiv" style="visibility:hidden; position:absolute; z-index:1000; "></div>
<!--ZOOMSTOP-->

<div id="printheader">
<span id="printtitle">Kentico CMS 6.0 Context Help</span><br />
<p class="p_Heading1"><span class="f_Heading1">New container/General tab</span></p>
</div>
<div id="idheader" style="border-bottom:1px solid #000;margin:0px 0px;"> 
<table id="breadtable" border="0" cellspacing="0" cellpadding="0" width="100%"> 
  <tr >
  <td align="left" class="breadhead" >
       <p id="breadcrumbs"><a href="mode_selection.htm"
        onmouseover="document.images.main.src='home_h.gif'" 
        onmouseout="document.images.main.src='home.gif'">
        <img name="main" src="home.gif" border="0" alt="Home topic" title="Home topic" /></a> 
        
        CMS Site Manager &gt; <a href="development.htm">Development</a> &gt; Web part containers &gt; Edit container:</p> 
  </td>
  </tr>
</table>
<table width="99%" border="0" cellspacing="0" cellpadding="0" id="headtable"> 

<!-- Script version of NavHeader -->
  <tr id="scriptNavHead" valign="middle" style="height: auto;"> 
    <td align="left" class="topichead" style="padding-left: 15px;"> 
    <p class="p_Heading1"><span class="f_Heading1">New container/General tab</span></p>

    </td>
    <td align="center" width="20" class="idnav" valign="bottom">
     <a href="web_part_containers_list.htm"
        onmouseover="document.images.prev.src='button_prev_h.gif'" 
        onmouseout="document.images.prev.src='button_prev.gif'">
        <img name="prev" src="button_prev.gif" border="0" alt="Previous topic" title="Previous topic" /></a>
     
   </td>
   
   <td align="center" width="20" class="idnav" valign="bottom">
     <a href="webpartcontainer_theme_tab.htm"
        onmouseover="document.images.next.src='button_next_h.gif'" 
        onmouseout="document.images.next.src='button_next.gif'"><img name="next" src="button_next.gif" border="0" alt="Next topic" title="Next topic" /></a>
        
   </td>

   
   
   
   
   

     
   <td id="print-button" align="center" width="20" class="idnav" valign="bottom">
     <a href="javascript: print();" 
     onmouseover="document.images.printbutton.src='print_h.gif'" 
     onmouseout="document.images.printbutton.src='print.gif'"><img name="printbutton" border="0" alt="Print this topic" title="Print this topic" src="print.gif" /></a>
   </td>  
     
     

  
   <td id="mail-feedback" align="center" width="20" class="idnav" valign="bottom">
   <a href="#"
        onclick='mailFB_custom();'
        onmouseover="document.images.feedback.src='mail_h.gif'" 
        onmouseout="document.images.feedback.src='mail.gif'"><img name="feedback" src="mail.gif" border="0" alt="Mail us feedback on this topic!" title="Mail us feedback on this topic!" /></a>
   </td>
   
   <td width="4">&nbsp;</td>
  </tr>
<!-- End script navheader version -->

<!-- NoScript version of navheader -->

  <tr id="noScriptNavHead" valign="middle" style="height: auto;"> 
    <td align="left" class="topichead"> 
    <p class="p_Heading1"><span class="f_Heading1">New container/General tab</span></p>

    </td>
    <td align="center" width="20" class="idnav" valign="bottom">
     <a href="web_part_containers_list.htm">
        <img src="button_prev.gif" border="0" alt="Previous topic" title="Previous topic" /></a>
     
   </td>
   
   <td align="center" width="20" class="idnav" valign="bottom">
     <a href="webpartcontainer_theme_tab.htm">
        <img src="button_next.gif" border="0" alt="Next topic" title="Next topic" /></a>
        
   </td>
   
   
   
  
   

     
     
   <td align="center" width="20" class="idnav" valign="bottom">
   <img border="0" alt="JavaScript is required for the print function" title="JavaScript is required for the print function" src="print_d.gif" />
   </td>
     
     
   
   <td align="center" width="20" class="idnav" valign="bottom">
   <a href="mailto:support@kentico.com?subject=Documentation%20feedback&body=Ref%20ID:%20NewEdit_container%0D%0D"><img src="mail.gif" border="0" alt="Mail us feedback on this topic!" title="Mail us feedback on this topic!" /></a>
   </td>
   
   <td width="4">&nbsp;</td>
  </tr>

<!-- End noscript navheader version -->
  </table>
<div id="autoTocWrapper"></div>
</div> 

<div id="idcontent"><div id="innerdiv">
<!--ZOOMRESTART-->
<p>The following properties can be entered when creating a new web part container, or editing an existing one:</p>
<p>&nbsp;</p>
<div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table width="820" cellspacing="0" cellpadding="5" border="0" style="border: none; border-spacing:0px; border-collapse: collapse;">
<tr style="text-align:left;vertical-align:top;">
<td valign="top" width="230" style="width:230px; border: solid 1px #000000;"><p>Display name</p>
</td>
<td valign="top" width="566" style="width:566px; border: solid 1px #000000;"><p>The name of the container displayed to the users.</p>
</td>
</tr>
<tr style="text-align:left;vertical-align:top;">
<td valign="top" width="230" style="width:230px; border: solid 1px #000000;"><p>Code name</p>
</td>
<td valign="top" width="566" style="width:566px; border: solid 1px #000000;"><p>The name of the container used in code.</p>
</td>
</tr>
<tr style="text-align:left;vertical-align:top;">
<td valign="top" width="230" style="width:230px; border: solid 1px #000000;"><p>HTML before web part</p>
</td>
<td valign="top" width="566" style="width:566px; border: solid 1px #000000;"><p>HTML content displayed before the web part - the beginning of the envelope.</p>
</td>
</tr>
<tr style="text-align:left;vertical-align:top;">
<td valign="top" width="230" style="width:230px; border: solid 1px #000000;"><p>HTML after web part</p>
</td>
<td valign="top" width="566" style="width:566px; border: solid 1px #000000;"><p>HTML content displayed after the web part - the closing part of the envelope.</p>
</td>
</tr>
<tr style="text-align:left;vertical-align:top;">
<td valign="top" width="230" style="width:230px; border: solid 1px #000000;"><p>CSS styles</p>
</td>
<td valign="top" width="566" style="width:566px; border: solid 1px #000000;"><p>This field becomes available if you click the <span style="text-decoration: underline;">Add CSS styles</span> link.</p>
<p>&nbsp;</p>
<p>Here you can define any CSS classes used within the code of the container. The specified styles will be loaded on any page where the given container is used. Please note that this requires the <span style="font-weight: bold;">Allow CSS from components</span> setting to be enabled in <span style="font-weight: bold;">Site Manager -&gt; Settings -&gt; System -&gt; Performance</span>.</p>
<p>&nbsp;</p>
<p>For more information about CSS styles of page components, please see the <a href="http://devnet.kentico.com/docs/6_0/devguide/css_components.htm" target="_blank" class="weblink">Development -&gt; CSS stylesheets and design -&gt; CSS for page components</a> topic in the Developer's Guide.</p>
</td>
</tr>
</table>
</div>
<p>&nbsp;</p>
<p>The <span style="font-weight: bold;">HTML before/after web part</span> fields can contain dynamically inserted values of the contained web part's properties. You can insert them using the following expression:</p>
<p>&nbsp;</p>
<p><span style="font-style: italic;">{%propertyname%}</span></p>
<p>&nbsp;</p>
<p>You will most often use the following expression to insert the container title:</p>
<p>&nbsp;</p>
<p><span style="font-style: italic;">{%ContainerTitle%}</span></p>
<p>&nbsp;</p>
<p>These macro expressions are resolved even when macro resolving for the particular web part (<span style="font-weight: bold;">Disable macros</span> property) is disabled.</p>
<p>&nbsp;</p>
<p class="p_Heading3"><span class="f_Heading3">Defining CSS styles</span></p>
<p>&nbsp;</p>
<p>There are two locations where CSS classes used by the web part container can be defined:</p>
<p>&nbsp;</p>
<div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 7px;"><table border="0" cellpadding="0" cellspacing="0" style="line-height: normal;"><tr style="vertical-align:baseline" valign="baseline"><td width="13"><span style="font-size: 10pt; font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', 'Arial'; color: #000000;">&#8226;</span></td><td><span style="font-weight: bold;">In the general site stylesheet</span> - all the CSS classes are stored in one file, but exporting the container to a site that uses a different stylesheet is more difficult.</td></tr></table></div><p>&nbsp;</p>
<div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 7px;"><table border="0" cellpadding="0" cellspacing="0" style="line-height: normal;"><tr style="vertical-align:baseline" valign="baseline"><td width="13"><span style="font-size: 10pt; font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', 'Arial'; color: #000000;">&#8226;</span></td><td><span style="font-weight: bold;">In the CSS styles property of the container</span> - classes are stored separately for containers, which requires an additional resource request, but containers are automatically exported (including staging) with their CSS classes to other sites or Kentico CMS instances.</td></tr></table></div><p>&nbsp;</p>
<p>A stylesheet request link similar to the following will be added to the &lt;head&gt; element of any page that contains web part containers with styles defined in their <span style="font-weight: bold;">CSS styles</span> property:</p>
<p>&nbsp;</p>
<p><span style="font-style: italic;">&lt;link href="/KenticoCMS_6.0/CMSPages/GetCSS.aspx?containers=BlackBox;OrangeBox" type="text/css" rel="stylesheet"/&gt;</span></p>
<p>&nbsp;</p>
<p>The value of the <span style="font-weight: bold;">containers</span> URL parameter is dependant on the containers used on the page, the example above is for a page that contains the <span style="font-style: italic;">Black box</span> and <span style="font-style: italic;">Orange box</span> containers.</p>
<p>&nbsp;</p>
<p>If <a href="http://devnet.kentico.com/docs/6_0/devguide/code_minification_and_compression.htm" target="_blank" class="weblink">CSS minification</a> is enabled, the request will use the following format instead:</p>
<p>&nbsp;</p>
<p><span style="font-style: italic;">&lt;link href="/KenticoCMS_6.0./CMSPages/GetResource.ashx?containers=BlackBox;OrangeBox" type="text/css" rel="stylesheet"/&gt; </span></p>
<p>&nbsp;</p>
<div style="text-align: justify; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;"><table cellspacing="0" cellpadding="10" border="1" style="border: solid 1px #000000; border-spacing:0px;">
<tr style="text-align:left;vertical-align:top;">
<td valign="top" width="57" style="width:57px; border: none"><p style="text-align: justify;"><span style="color: #000000;">&nbsp;</span></p>
<p style="text-align: justify;"><img src="embim56.gif" width="51" height="54" vspace="1" hspace="1" border="0" alt=""></p>
</td>
<td valign="top" width="511" style="width:511px; border: none"><p style="text-align: justify;"><span style="color: #000000;">&nbsp;</span></p>
<p style="text-align: justify;"><span style="font-weight: bold;">Storing files related to web part containers</span></p>
<p>&nbsp;</p>
<p>If your web part container code uses any additional files, such as images used by the classes defined in the <span style="font-weight: bold;">CSS styles</span> property, they must be stored in the <span style="font-style: italic;">~/App_Themes/Components/Containers/&lt;container code name&gt;</span> folder so they can be exported/imported along with the container.</p>
<p>&nbsp;</p>
<p>If the used CSS classes are defined in the site stylesheet, any accompanying files should be stored in the <span style="font-style: italic;">~/App_Themes/&lt;stylesheet code name&gt;</span> folder.</p>
</td>
</tr>
</table>
</div>
<p>&nbsp;</p>
<p>More resources can be found at:</p>
<p>&nbsp;</p>
<div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 7px;"><table border="0" cellpadding="0" cellspacing="0" style="line-height: normal;"><tr style="vertical-align:baseline" valign="baseline"><td width="13"><span style="font-size: 10pt; font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', 'Arial'; color: #000000;">&#8226;</span></td><td><a href="http://devnet.kentico.com/docs/6_0/devguide/web_part_containers_overview.htm" target="_blank" class="weblink">Developer's Guide -&gt; Development -&gt; Web parts -&gt; Web part containers -&gt; Containers overview</a></td></tr></table></div><div style="text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 7px;"><table border="0" cellpadding="0" cellspacing="0" style="line-height: normal;"><tr style="vertical-align:baseline" valign="baseline"><td width="13"><span style="font-size: 10pt; font-family: 'Arial Unicode MS', 'Lucida Sans Unicode', 'Arial'; color: #000000;">&#8226;</span></td><td><a href="http://devnet.kentico.com/docs/6_0/devguide/creating_web_part_containers.htm" target="_blank" class="weblink">Developer's Guide -&gt; Development -&gt; Web parts -&gt; Web part containers -&gt; Creating web part containers</a></td></tr></table></div><p>&nbsp;</p>

<!--ZOOMSTOP--> 

<noscript>
<p class="help-url"><b>Help URL:&nbsp;</b><a href="<%HELP_LOCATION%><%DEVNET_PATH_NAME%>/index.html?newedit_container.htm" target="_top" title="Right-click to copy the URL of this help topic">
<%HELP_LOCATION%><%DEVNET_PATH_NAME%>/index.html?newedit_container.htm</a>
</p>
</noscript>
<script type="text/javascript">
var autoURL = true;
if (autoURL) {
      document.write(getHref("index.html","Help URL:","Right-click to copy the URL of this help topic"));
      } else {
             document.write('<p class="help-url"><b>Help URL:&nbsp;</b>');
             document.write('<a href="<%HELP_LOCATION%><%DEVNET_PATH_NAME%>/index.html?newedit_container.htm" target="_top" title="Right-click to copy the URL of this help topic"><%HELP_LOCATION%><%DEVNET_PATH_NAME%>/index.html?newedit_container.htm</a>');
             document.write('</p>');
      }
</script>

</div></div> 
</body>
</html>





